<template>
  <div class="container page">
  <img style="width:100%;" :src="imgs[0].top"  mode="widthFix" alt="">
<!--  <div class="recomond">-->
<!--    <p v-bind:class="{choose: tabA === 0}" v-on:click="chooseTab(0)">全部</p>-->
<!--    <p v-bind:class="{choose: tabA === 100006}" v-on:click="chooseTab(100006)">修复</p>-->
<!--    <p v-bind:class="{choose: tabA === 100012}" v-on:click="chooseTab(100012)">抗衰</p>-->
<!--    <p v-bind:class="{choose: tabA === 100002}" v-on:click="chooseTab(100002)">洗护</p>-->
<!--    &lt;!&ndash; <p v-bind:class="{choose: tabA === 100008}" v-on:click="chooseTab(100008)">面膜</p> &ndash;&gt;-->
<!--  </div>-->
  <div class="recomond2">
<!--    <p v-bind:class="{choose: tabA === (category.parent_id - 1)}" :key="category" v-for="category of categoryMap" v-on:click="chooseTab(category.parent_id - 1)">{{category.name}}</p>-->
    <p v-bind:class="{choose: tabA === index}" :key="index" v-for="(category,index) in categoryMap" v-on:click="chooseTab(category.category_item[0].id, index)">{{category.name}}</p>
  </div>

  <div class="recomond3">
<!--    <p v-bind:class="{choose2: tabB === index}" :key="index" v-for="(categoryi,index) in categoryMap[tabA].category_item" v-on:click="chooseTab2(categoryi.id,index)">{{categoryi.name}}</p>-->
    <p v-bind:style="tabB === index ? 'color:#999': 'color:#fff'" :key="index" v-for="(categoryi,index) in categoryMap[tabA].category_item" v-on:click="chooseTab2(categoryi.id,index)">{{categoryi.name}}</p>
  </div>

    <div class="flex" :key="product" v-for="product of productList" @click="productChoose(product.id)">
        <ul class="flexs">
            <img :src="product.main_image" class="shop" />
        </ul>
        <ul class="flexs2">
            <!-- <p class="vvu">VVU</p> -->
            <p class="shopname" style="font-size:30rpx;margin-top:10rpx">{{product.name}}</p>
<!--            <p class="zt" style="font-size:20rpx;">净含量:{{product.content}}</p>-->
<!--            <p class="zt" style="font-size:20rpx;">{{product.subtitle}}</p>-->
            <rich-text class="zt" style="font-size:20rpx;" :nodes="product.subtitle"></rich-text>
<!--            <p class="zt" style="font-size:20rpx;">{{product.subtitle}}</p>-->
            <!-- <p class="zt" style="font-size:20rpx;">月销量:{{product.saled_num}}个</p> -->
            <!-- <p class="zt" style="font-size:20rpx;">库存:{{product.stock}}个</p> -->
            <p class="je">￥{{product.price}}</p>
        </ul>
    </div>

<div style="height:150rpx;"></div>
  <!-- <div class="productList" :key="product" v-for="product of productList" @click="productChoose(product.id)">
    <div>
      <img :src="product.main_image">
    </div>
    <div class="des">
      <p style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{product.name}}</p>
      <p style="height: 60rpx;"></p>
      <p class="price"><span>库存:{{product.stock}}个</span><span style="text-align:right;font-size: 40rpx;color:#78b8ad;">¥{{product.price}}</span></p>
    </div>
  </div> -->

  </div>
</template>
<script>
// var WXBizDataCrypt = require('@/tools/WXBizDataCrypt')

import {showSuccess, showModal} from '@/util'
import {get, post} from '@/util'
// import {get2, post2} from '@/server/api'
import config from '@/config'
export default {

  data () {
    return {
      imgs: [
        {'top':`${config.imghost}shop/1.png`}
      ],
      tabA: 0,
      tabB: 0,
      productList: [],
      focus: true,
      inputValue: '',
      categoryMap: []
    }
  },
  mounted () {
    this.userinfo = wx.getStorageSync('userinfo')
  },
  onShareAppMessage() {
    return {
      title: `华人耀酱香型白酒，传承古法工艺，与国酒茅台同宗同源同品。`,
      // imageUrl: 'https://www.rrjiaoyi.com/static/rr-min/share/share.png',
      path: `/pages/hcdindex/main?shareuser=${wx.getStorageSync('user').id}`
    }
  },
  methods: {
    chooseTab(id,x) {
      this.tabA = x
      this.tabB = 0
      this.get_product(id);
      // if(x === 0) {
      //   this.get_product("");
      // } else {
      //   this.get_product(x);
      // }
    },
    chooseTab2(id,x) {
      this.tabB = x
      // console.log('xxx')
      // console.log(x)
      // console.log('id')
      // console.log(id)
      this.get_product(id);
    },
    async getCategory() {
      return await get(`/geweb/shop/category/list`, {}).then(result => {
        console.log(result.data)
        this.categoryMap = result.data;
      })
    },
    async getCategoryStart() {
      return await get(`/geweb/shop/category/list`, {}).then(result => {
        console.log(result.data)
        this.categoryMap = result.data;
        this.get_product(result.data[0].category_item[0].id)
      })
    },
    async get_product(categoryId) {
      return await get(`geweb/product/get_productlist?categoryId=${categoryId}`, {}).then(result => {
        console.log(result.res)
        this.productList = result.res;
      })
    },
    productChoose (id) {
      // console.log(name, img, userId, accountId)
      wx.navigateTo({
        url: `/pages/product-detail/main?id=${id}`
      })
    },
    async player() {
      return await post('minipro/List', {}, {'api':'all', 'page':1})
    },
    async demo() {
    // return await get2('demo', {})
    },
    async joke() {
      return await get2('api/jokes', {})
    },
    predict () {
      wx.navigateTo({
        url: '/pages/search/main'
      })
    },
    jumpClick (comment) {
      wx.navigateTo({
        // url: '/pages/web-view/main'
        url: '/pages/web-view/main?path=' + 'https://wj.qq.com/s/2491547/f457/'
        // url: '/pages/detail/main'
      })
    }
  },
  onShow () {
    // this.get_product("")
    // console.log('show')
    console.log(this.config)
    this.tabB = 0
    this.getCategoryStart()
    // setTimeout(() => {
    //   this.getCategory()
    //   this.get_product(this.categoryMap[0].category_item[0].id)
    // }, 50)
  }
}
</script>

<style scoped lang='scss'>
.container{
  font-size: 30rpx;
}
page {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.section {
  text-align: center;
  margin-top: 200rpx;
  padding: 0 100rpx;
  display: flex;
  height: 80rpx;
  line-height: 80rpx;
}
.recomond {
  margin: 0 40rpx;
  margin-top: 40rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  display: flex;
  p {
    flex: 1;
  }
}
.recomond2 {
  margin: 0 150rpx;
  margin-top: 40rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  display: flex;
  p {
    flex: 1;
    border-radius: 10px 10px 0px 0px ;
  }
}
.recomond3 {
  background-color: black;
  margin: 0 40rpx;
  /*margin-top: 40rpx;*/
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  display: flex;
  p {
    flex: 1;
    color: #ffffff;
  }
}
.choose2 {
  // color: #78b8ad;
  /*color: #ffffff;*/
  /*background-color: #ffffff;*/
    color: #44CFDC;
}
.choose {
  // color: #78b8ad;
  color: #ffffff;
  background-color: black;
}

.productList {
  margin: 0 25rpx;
  margin-top: 50rpx;
  border: 1px solid #ddd;
  border-radius: 4px;
  height: 200rpx;
  // line-height: 200rpx;
  display: flex;
  text-align: center;
  div {
    flex: 1;
      img{
        width: 180rpx;
        height:180rpx;
        margin: 10rpx;
        // border-radius: 50%;
    }
  }
  .des{
    width: 400rpx;
    flex: 3;
    height: 200rpx;
    margin: 10rpx 30rpx;
    p {
      text-align: left;
      line-height: 60rpx;
    }
    .price {
      display: flex;
      span {
        flex: 1;
      }
    }
  }
}

.foot {
  color: rgb(45, 161, 187);
  text-align: center;
  margin-top: 200rpx;
}

.tb{
        width: 100%
    }
    .flex{
        display: flex;
        margin-top: 50rpx;
    }
    .flexs{
        flex: 1
    }
    .flexs2{
    flex: 1;
    margin-right: 10rpx;
    }
    .shop{
        width:350rpx;
        height:350rpx;
        margin-left: 20px;

        margin-right: 30px;
    }
    .vvu{
        font-size: 24px;
        margin-top: 10rpx;
    }
    .zt{
        font-size: 14px;
    }
    .shopname{
        margin-bottom: 5px;
    }
    .je{
        margin-top: 10px;
        // background: #C8D3D1;
        /*background-color: #000000;*/
        background-color: #db0025;
        color: #ffffff;
        width: 90px;
    }
</style>
